<template>
  <div>
    <div class="hand">
      <go-back></go-back>
      <input type="text" class="sear" placeholder="请输入礼券码" />
      <button class="btn">兑换</button>
    </div>
    <div class="dv">
      <div class="top">
        <i>1</i>
        <span>元</span>
        <h3>满减1</h3>
        <p>满0元使用</p>
        <button>立即领取</button>
      </div>
      <p>领取7天内有效</p>
    </div>
    <div class="dv">
      <div class="top">
        <i>1</i>
        <span>元</span>
        <h3>满减</h3>
        <p>满100元使用</p>
        <button>立即领取</button>
      </div>
      <p>领取7天内有效</p>
    </div>
  </div>
</template>
<script>
 import goBack from '@/components/goBack/goBack'
export default {
  components:{goBack},
  methods: {
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/.p3[data-v-d1c26aa2] {
    font-size: .5rem;
    padding: .3rem;
    display: inline-block;
}
.hand {
  font-size: .3rem;
  width: 100%;
  height: 4.5rem;
  background: url('../../assets/imgs/111.c66af1e.jpg');
  background-size: 100% 100%;
  position: relative;
  i {
    position: absolute;
    top: 0.3rem;
    left: 0.4rem;
    font-size: 0.5rem;
  }
  .sear {
    width: 4.2rem;
    height: 0.6rem;
    border: 0.01rem solid #fa893d;
    text-indent: 0.2rem;
    border-radius: 0.1rem;
    position: absolute;
    top: 3.2rem;
    left: 0.8rem;
  }
  input::-webkit-input-placeholder {
    color: #ee7c7b;
  }
  .btn {
    position: absolute;
    width: 1.2rem;
    height: 0.6rem;
    border: none;
    color: white;
    background: #ee7c7b;
    border-radius: 0.1rem;
    top: 3.2rem;
    left: 5.2rem;
  }
}
.dv {
  width: 90%;
  height: 2.6rem;
  border-radius: 0.1rem;
  margin: 0.2rem auto;
  overflow: hidden;
  font-size: .3rem;
  .top {
    width: 100%;
    height: 1.9rem;
    background: #ec7877;
    position: relative;
    color: white;
    i {
      position: absolute;
      font-size: 0.7rem;
      top: 0.5rem;
      left: 0.4rem;
    }
    span {
      position: absolute;
      top: 0.8rem;
      left: 0.9rem;
    }
    h3 {
      position: absolute;
      top: 0.4rem;
      left: 1.8rem;
    }
    p {
      position: absolute;
      left: 1.8rem;
      top: 1.2rem;
    }
    button {
      position: absolute;
      right: 0.4rem;
      top: 0.6rem;
      border: none;
      border-radius: 0.1rem;
      background: #fce8e7;
      padding: 0.1rem 0.1rem;
      color: #d45656;
    }
  }
  > p {
    width: 100%;
    height: 0.7rem;
    background: #cc7773;
    color: white;
    line-height: 0.7rem;
    padding-left: 0.3rem;
  }
}
</style>